<template>
  <ARow style="margin-bottom: 30px;">
    <AForm ref="ruleForm" :layout="layout" :model="formState" v-bind="{ ...defaultCol, ...$attrs }">
      <ARow type="flex" :gutter="24" align="middle">
        <template v-for="field in fieldsData || fields" :key="field.key">
          <ACol :span="layout === 'inline'
            ? ''
            : field.colAttrs?.span || 24" style="margin-top: 20px;">
            <AFormItem :key="field.key" :name="field.key" v-bind="field.formItemAttrs">
              <template #label>
                <span class="form-item_label" :style="{
                  width:
                    `${field.labelWidth}px` || '100%',
                }">{{ field.label || field.key }}</span>
              </template>
              <component v-bind="{
                ...field.attrs,
                disabled:
                  field.attrs && field.attrs?.disabled
              }" :is="field.el" v-model:value="formState[field.key]" :placeholder="(field.attrs && field.attrs.placeholder) ||
                field.label ||
                field.key
                " :style="{ width: field.width ? field.width + 'px' : '183px' }" v-on="{...field.on, click: () => clickHandle}" />
            </AFormItem>
          </ACol>
        </template>
        <!-- v-auth="auth" -->
        <div style="padding-top: 20px;">
          <ACol v-if="layout === 'inline'" :span="layout === 'inline' ? '' : 24">
            <AFormItem>
              <AButton type="primary" :icon="h(SearchOutlined)" style="margin-right: 10px" @click="search(0)">{{ searchText
                }}</AButton>
              <AButton :icon="h(UndoOutlined)" @click="search(1)">
                {{ cancelText }}
              </AButton>
            </AFormItem>
          </ACol>
        </div>
      </ARow>
    </AForm>
  </ARow>
</template>
<script lang="ts" setup>
/**
 * 查询表单： VSearchForm
 * 此组件只适用于查询表单，未作弹层 表单逻辑、校验等功能
 * 后续需要，可根据此组件进行改善
 * created by chengyang at 2025-04-14 15:02:09
 * @param {Object} defineProps
 * @param {Function} defineEmits
 * 使用： <VForm :fields @search="search"  />
 */
import { computed, h, ref } from 'vue';
import type { Props } from './types/types'
import { SearchOutlined, UndoOutlined } from '@ant-design/icons-vue';
const props = withDefaults(defineProps<Props>(), {
  // form：只有弹层表单才会用到，预留，此组件只适用于查询表单
  form: {},
  fields: () => [],
  layout: 'inline',
  searchText: '查询',
  cancelText: '重置',
})
const emits = defineEmits({
  search: val => !!val,
})

const fieldsData = computed(() => props.fields)
const formState = ref<any>({})

const search = (type?: number) => {
  if (type === 1) {
    Object.keys(formState.value).forEach((key) => {
      formState.value[key] = undefined
    })
  }
  emits('search', formState.value)
}

const clickHandle = (e: any) => {
  console.log(e, 'val------')
}


const defaultCol = computed(() => {
  const config = {
    horizontal: {
      "label-col": { span: 4 },
      "wrapper-col": { span: 20 },
    },
    inline: {
      "label-col": {},
      "wrapper-col": {},
    },
    vertical: {
      "label-col": { lg: 24 },
      "wrapper-col": { lg: 24 },
    },
  };
  return config[props.layout]
})

defineOptions({
  name: 'VSearchForm'
})
</script>
<style lang="less" scoped></style>
